<template>
  <div class="sel">
    <div class="item">
      <div class="item-li">
        <div class="item-btn" @click="cityClick">{{ cityText }}</div>
        <div class="item-option" v-if="isCity">
          <span v-for="(item, index) in city" @click="citySpanClick(index)">{{
            item
          }}</span>
        </div>
      </div>
      <div class="item-li">
        <div class="item-btn" @click="villageClick">{{ villageText }}</div>
        <div class="item-option" v-if="isVillage">
          <span
            v-for="(item, index) in village"
            @click="villageSpanClick(index)"
            >{{ item }}</span
          >
        </div>
      </div>
      <div class="item-li">
        <div class="item-btn" @click="hamletClick">{{ hamletText }}</div>
        <div class="item-option" v-if="isHamlet">
          <span
            v-for="(item, index) in hamlet"
            @click="hamletSpanClick(index)"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { city } from "./city";
export default {
  data() {
    return {
      city: [],
      village: [],
      hamlet: [],
      cityText: this.$store.state.city.name,
      villageText: this.$store.state.village.name,
      hamletText: this.$store.state.hamlet.name,
      isCity: false,
      isVillage: false,
      isHamlet: false,
      cityIndex: this.$store.state.city.id,
      villageIndex: this.$store.state.village.id,
    };
  },
  methods: {
    cityClick() {
      this.city = [];
      city.forEach((el) => {
        this.city.push(el.name);
      });
      this.isCity = !this.isCity;
    },
    villageClick() {
      if (this.village.length == 0 || this.villageText == "乡/镇/街道") {
        city[this.$store.state.city.id].village.forEach((el) => {
          this.village.push(el.name);
        });
      }
      this.isVillage = !this.isVillage;
    },
    hamletClick() {
      if (this.hamlet.length == 0 || this.hamletText == "村") {
        city[this.$store.state.city.id].village[
          this.$store.state.village.id
        ].hamlet.forEach((el) => {
          this.hamlet.push(el.name);
        });
      }
      this.isHamlet = !this.isHamlet;
    },
    citySpanClick(index) {
      this.village = [];
      this.hamlet = [];
      this.cityIndex = index;
      this.cityText = city[index].name;
      city[this.cityIndex].village.forEach((el) => {
        this.village.push(el.name);
      });
      this.isVillage = true;
      this.$store.state.city = {
        id: index,
        name: city[index].name,
      };
    },
    villageSpanClick(index) {
      this.hamlet = [];
      this.villageIndex = index;
      this.villageText = city[this.cityIndex].village[index].name;
      city[this.cityIndex].village[this.villageIndex].hamlet.forEach((el) => {
        this.hamlet.push(el.name);
      });
      this.isHamlet = true;
      this.$store.state.village = {
        id: index,
        name: this.villageText,
      };
    },
    hamletSpanClick(index) {
      this.hamletText =
        city[this.cityIndex].village[this.villageIndex].hamlet[index].name;
      this.isCity = false;
      this.isVillage = false;
      this.isHamlet = false;
      let scene =
        city[this.cityIndex].village[this.villageIndex].hamlet[index].scene;
      this.$emit("receive", scene);
      this.$store.state.hamlet = {
        id: index,
        name: this.hamletText,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.sel {
  width: 100%;
  height: 100%;
}
.search {
  width: 100%;
  height: 2.5rem;
  border-radius: 1.25rem;
  border: 1px solid #195cc5;
  background: transparent url(~assets/img/ksh/search.png) no-repeat 95% center;
  background-size: 25px 25px;
  color: #fff;
  text-align: center;
  outline: none;
  margin-bottom: 3%;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #fff;
  font-size: 0.875rem;
}

.item {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  .item-li {
    width: 45%;
    position: relative;
    .item-btn {
      width: 100%;
      line-height: 1.875rem;
      border: 1px solid #018de7;
      border-radius: 5px;
      text-indent: 1px;
      font-size: 0.875rem;
      color: #fff;
      cursor: pointer;
      background: url(~assets/img/ksh/pull.png) no-repeat 92% center;
      background-size: 0.5rem 0.5rem;
    }
    .item-option {
      position: absolute;
      top: 1.875rem;
      left: 0;
      font-size: 0.75rem;
      width: 100%;
      max-height: 150px;
      border-radius: 5px;
      overflow: auto;
      transition: 0.3s;
      border: 1px solid #018de7;
      background-color: rgb(28, 33, 95);
      cursor: pointer;
      z-index: 123;
      span {
        display: block;
        width: 100%;
        padding: 0.0625rem 0;
        text-align: center;
        color: #fff;
        border-bottom: 1px solid #018de7;
      }
      span:hover {
        background: #018de7;
      }
    }
    .item-option::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>